<template>
  <view class="container">
    <up-sticky bgColor="#fff" customNavHeight="0">
      <view class="header flex items-center">
        <up-search placeholder="搜索会员手机号/昵称/姓名" v-model="searchForm.keyword" :show-action="false" @clear="handleSearch" @search="handleSearch"></up-search>
        <com-filter-popup @confirm="handleFilterChange"></com-filter-popup>
      </view>
    </up-sticky>
    <view class="content">
      <f-list ref="listRef" :immediately="false" :request="getData">
        <template #header>
          <view class="top">共筛选出 <text class="text-[red]">{{total}}</text> 条记录</view>
        </template>
        <template #default="{item, index}">
          <com-answer-item :item="item"></com-answer-item>
        </template>
      </f-list>
    </view>
  </view>

</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { getAdminAnswerRecordApi } from '@/addon/htscrm/api';
import { onLoad } from '@dcloudio/uni-app';
import FList from '@/addon/htscrm/components/f-list/index.vue';
import ComFilterPopup from './com-filter-popup.vue'
import ComAnswerItem from './com-answer-item.vue';

const listRef = ref()

const searchForm = ref<IFilterData>({
  id: 0,
  search_type: 0,
  keyword: '',
  uid: '',
  mobile: ''
})

const total = ref(0)

onLoad((e:any) => {
  searchForm.value.id = e.id
  nextTick(() => {
    listRef.value.reload()
  })
})
async function getData(meta: IPage) {
  const params = {
    ...searchForm.value,
    ...meta
  }
  const res = await getAdminAnswerRecordApi(params)
  if (res.code == 1) {
    total.value = res.data.total
    return res.data
  }
}

function handleSearch() {
  listRef.value.reload();
}
/**
 * 筛选
 * @param value 
 */
 function handleFilterChange(value:any) {
  if(!value) return 
  searchForm.value = Object.assign(searchForm.value, value)
  listRef.value?.reload();
}

</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f6f7f8;
  .header {
    padding: 30rpx;
  }

  .u-empty {
    padding-top: 200rpx;
  }

  .top {
    padding: 20rpx 30rpx 0;
    color: #777;
  }

}
</style>